import React, { Component } from 'react';
import autoBind from 'react-autobind';
import { Link, browserHistory } from 'dva/router';
import { NavBar, Accordion, List, WhiteSpace } from 'antd-mobile';

// style
import styles from './right-sidebar.css';
import IconfontStyle from '../../../assets/iconfont/iconfont.css';

class RightSidebar extends Component {
	constructor(props) {
        super(props)
        autoBind(this)

        this.state = {
        	inputValue: ''
        }
    } 
   	onInputChange(e) {
	   	this.setState({
	   		inputValue: e.target.value
	   	})
   	}
	render() {
		const { goods } = this.props
		const { isShowFilter, onClose, onSearch } = this.props

	 	return (
 			<div className="shop-nav-filter">
	 			<div onClick={onClose} className={styles['shop-nav-filter-mask']} 
	 				style={isShowFilter ? {display: 'block'} : null}></div>
	 			<div className={styles['shop-nav-filter']} style={isShowFilter ? {right: 0} : null}>

	 				<div className={styles['shop-nav-filter-title']} onClick={() => browserHistory.push(`/shop/${goods.brandDetail.brandId}`)}>
		 				{goods.brandDetail && goods.brandDetail.englishName}
		 				{goods.brandDetail && goods.brandDetail.brandName}
	 				</div>
	 				<div className={styles['shop-nav-filter-all']} onClick={onClose}>
	 					全部商品

	 					<span className={styles['shop-nav-filter-seek']} onClick={() => browserHistory.push(`/shop/${goods.brandDetail.brandId}`) }>
	 						查看 
	 						<img style={{marginLeft: '0.12rem', width: '0.12rem'}} src={require('../../../assets/icon/arrow-right.png')} />
	 					</span>
	 				</div>
	 				
	 				<div className={styles['shop-nav-filter-whitespace']}></div>

	 				<div className={styles['shop-nav-filter-accordion']}>
	 					{
	 						goods.brandDetail && goods.brandDetail.category ? (
	 								<Accordion defaultActiveKey="0" className="my-accordion">
	 									{
	 										goods.brandDetail.category.map((category, kk) => {
	 											return (
	 												<Accordion.Panel header={category.catName} key={kk}>
											            <List>
											            	{
											            		category.children && category.children.map((child, ii) => {
											            			return <List.Item key={ii} onClick={() => {
											            				onSearch && onSearch(child.catName)
											            				onClose && onClose()
											            			}}>{child.catName}</List.Item>
											            		})
											            	}
											            </List>
											          </Accordion.Panel>
	 												)
	 										})
	 									}
							        </Accordion>
	 							) : null
	 					}
		 				
	 				</div>
	 			</div>
 			</div>
	  	);
	}
};

RightSidebar.propTypes = {
};

export default RightSidebar
